<template>
  <view class="listItem box">
    <view class="firstRow">
      <view class="left">
        <text class="stockName">{{ params.name }}</text>
        <text class="stockCode">{{ params.code }}</text>
      </view>
      <view class="right">
        <text class="text">双低</text>
        <text class="num">{{ params.dblow }}</text>
      </view>
    </view>

    <view class="secondRow">
      <view class="left">
        <text class="text">转股价值</text>
        <text class="num">{{ params.convert_value }}</text>
      </view>
      <view class="right">
        <text class="text">溢价率</text>
        <text class="num">{{ params.premium_rt }}</text>
      </view>
    </view>

    <view class="thirdRow">
      <view class="left item">
        <text class="label">单价</text>
        <u-input class="input" input-align="center" type="number" v-model="params.price" @input="handleInfoChange" />
      </view>
      <view class="right item">
        <text class="label">数量</text>
        <u-input class="input" input-align="center" type="number" v-model="params.num" @input="handleInfoChange" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  computed: {
    params: {
      get() {
        return this.info;
      },
      set(val) {
        this.$emit('hasChange', val, this.index);
      }
    }
  },
  methods: {
    handleInfoChange() {
      this.$emit('hasChange', this.params, this.index);
    }
  }
};
</script>

<style lang="scss" scoped>
.listItem {
  margin: 30rpx auto;
}
.input {
  width: 150rpx;
  border-bottom: 2rpx solid #000;
}
.text {
  margin-right: 10rpx;
  font-size: 30rpx;
  color: gray;
}
.num {
  font-size: 30rpx;
  color: red;
}
.firstRow,
.secondRow,
.thirdRow {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    align-items: center;
    .label {
      width: 100rpx;
    }
  }
}
.firstRow {
  margin-top: 0rpx;
  .left {
    .stockName {
      font-weight: 700;
    }
    .stockCode {
      margin-left: 10rpx;
      font-size: 30rpx;
      color: gray;
    }
  }
}
</style>
